<div class="card mb-4">
  <div class="card-header d-flex align-items-center justify-content-between">
    <h5 class="card-title"><%= Spree.t(:properties) %></h5>

    <% if can?(:manage, Spree::Property) %>
      <%= link_to_with_icon 'adjustments', Spree.t(:manage_properties), spree.admin_properties_path, class: 'btn btn-sm btn-light' %>
    <% end %>
  </div>
  <div class="card-body p-0">
    <table class="table">
      <thead>
        <tr>
          <th><%= Spree.t(:property) %></th>
          <th><%= Spree.t(:value) %></th>
        </tr>
      </thead>
      <tbody>
        <%= f.fields_for :product_properties do |product_property_form| %>
          <% property = product_property_form.object.property %>
          <%= product_property_form.hidden_field :id %>
          <%= product_property_form.hidden_field :property_id %>
          <tr>
            <td class="align-top pt-3 w-25">
              <code><%= property.name %></code>
            </td>
            <td class="w-75">
              <div class="form-group">
                <% if property.long_text? %>
                  <%= product_property_form.text_area :value, { class: 'form-control', data: { controller: 'textarea-autogrow'} } %>
                <% elsif property.number? %>
                  <%= product_property_form.number_field :value, class: 'form-control' %>
                <% elsif property.rich_text? %>
                  <div class="trix-container">
                    <%= product_property_form.rich_text_area :value %>
                  </div>
                <% else %>
                  <%= product_property_form.text_field :value, class: 'form-control' %>
                <% end %>
              </div>
            </td>
          </tr>
        <% end %>
      </tbody>
    </table>
  </div>
</div>